<template>
  <div>
    <open-modal :openModal="showSupporting" @closeModal="handleClickCloseSupport()">
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-text-hidden c-hh640">
        <div class="c-p c-ph24">
          <div class="c-w100 c-flex-row c-justify-sb c-aligni-center c-hh88 c-fc-xblack c-bd-b1">
            <div class="c-fs28 c-fc-xblack">{{title}}</div>
            <i
              class="iconfont c-fc-sgray c-fs30"
              @click="handleClickCloseSupport()"
            >&#xe84e;</i>
          </div>
        </div>
        <div class="c-w100 c-bg-white c-hh540 c-contexty-scroll c-scroll-touch" id="scrollContent">
          <div class="c-w100 c-ph24">
            <div class="c-flex-row c-pv24 c-bd-b1" v-for="(item, index) in supportingList" :key="index" @click="handleClickGodetail(item)">
              <!-- 课程 -->
              <div class="c-ww180 c-hh120 c-br12 c-p">
                <template v-if="item.prodType == ckFrom.course || item.prodType == ckFrom.column">
                  <img
                    class="c-w100 c-h c-object-fit-cover c-br12"
                    :src="$addXossFilter(item.avatar, require('@/assets/defult270.png'))"
                    alt=""
                  >
                </template>
                <template v-else>
                  <img
                    class="c-w100 c-h c-object-fit-cover c-br12"
                    :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))"
                    alt=""
                  >
                </template>
                <template v-if="item.prodType == ckFrom.course">
                  <div class="c-pa c-p-b0 c-p-r0 c-ph10 c-hh26 c-fs18 c-fc-white c-translucent-balck50 c-br-tl12 c-br-br12 c-flex-row c-flex-center">{{item.courseType == 0 ?'视频':item.courseType == 1?'音频':'图文'}}</div>
                </template>
                <template v-else>
                  <div class="c-pa c-p-b0 c-p-r0 c-ph10 c-hh26 c-fs18 c-fc-white c-translucent-balck50 c-br-tl12 c-br-br12 c-flex-row c-flex-center">{{prodMapType[item.prodType]}}</div>
                </template>
              </div>
              <div class="c-flex-grow1 c-w0 c-ml20 c-flex-column c-justify-sb">
                <div class="c-fs24 c-fc-xblack c-text-ellipsis2">{{item.name}}</div>
                <div class="c-flex-row c-justify-sb c-aligni-center">
                  <div class="theme-fc c-fs24">
                    <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>
                    {{item.payType | priceValueFilter(item.price, item.prodType)}}
                  </div>
                </div>
              </div>
            </div>
            <loading-status-tem
              :noData="supportingList.length == 0"
              noDataText="暂无数据"
            ></loading-status-tem>
          </div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
  import OpenModal from "@/components/templates/common/openModal.vue";
  import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
  export default {
    name: 'CircleSupporting',
    props: {
      showSupporting: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '购买以下任意产品，即可免费加入圈子'
      },
      supportingList: {
        type: Array,
        default: []
      }
    },
    components: {
      OpenModal,
      loadingStatusTem
    },
    data() {
      return {
        ckFrom: global.ckFrom,
        prodMapType: global.prodMapType
      }
    },
    methods: {
      handleClickCloseSupport() {
        this.$emit('handleClickCloseSupport')
      },
      handleClickGodetail(item) {
        this.$emit('handleClickGodetail', item)
      }
    }
  }
</script>

<style lang="less" scoped>

</style>